<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>选中分享</title>
    <style>
        .my_text {
            width: 400px;
            margin: 50px;
        }

        #magnifier_icon {
            position: fixed;
            /*    相对于浏览器窗口定位  */
            /* display: none; */
            background: darkgray;
            border-radius: 10px;
            cursor: pointer;
            font-size: 32px;
        }
    </style>
</head>

<body>



    &#128517;
    &#128517;
    &#128517;
    &#128517;
    &#128517;
    &#128517;



    <p class="my_text">
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Explicabo eius impedit minus quos repellat quidem
        fugit recusandae beatae. Assumenda quidem nostrum quasi tempore non, ipsam eveniet delectus magni placeat
        commodi dolor hic nesciunt possimus fugiat necessitatibus exercitationem soluta explicabo natus nihil
        accusantium ea, autem dolore consectetur! Voluptate, praesentium? Quas dicta rem quidem culpa alias eius eveniet
        velit ea autem vero, optio non, fuga dolore ratione. Sit eum illo totam labore accusamus, saepe dolorem quasi
        est? Tempore deleniti quae illo culpa sit quod laborum labore earum, nisi ea molestias recusandae optio quas
        minima nesciunt perferendis dolor! Impedit culpa, harum fuga repudiandae totam dolorum mollitia voluptas sed sit
        consequuntur eveniet! Eos cumque repellat delectus est laborum cupiditate nemo consequuntur. Deserunt
        repellendus vitae ducimus consectetur quod.
    </p>
    <p class="my_text">
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Explicabo eius impedit minus quos repellat quidem
        fugit recusandae beatae. Assumenda quidem nostrum quasi tempore non, ipsam eveniet delectus magni placeat
        commodi dolor hic nesciunt possimus fugiat necessitatibus exercitationem soluta explicabo natus nihil
        accusantium ea, autem dolore consectetur! Voluptate, praesentium? Quas dicta rem quidem culpa alias eius eveniet
        velit ea autem vero, optio non, fuga dolore ratione. Sit eum illo totam labore accusamus, saepe dolorem quasi
        est? Tempore deleniti quae illo culpa sit quod laborum labore earum, nisi ea molestias recusandae optio quas
        minima nesciunt perferendis dolor! Impedit culpa, harum fuga repudiandae totam dolorum mollitia voluptas sed sit
        consequuntur eveniet! Eos cumque repellat delectus est laborum cupiditate nemo consequuntur. Deserunt
        repellendus vitae ducimus consectetur quod.
    </p>
    <p class="my_text">
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Explicabo eius impedit minus quos repellat quidem
        fugit recusandae beatae. Assumenda quidem nostrum quasi tempore non, ipsam eveniet delectus magni placeat
        commodi dolor hic nesciunt possimus fugiat necessitatibus exercitationem soluta explicabo natus nihil
        accusantium ea, autem dolore consectetur! Voluptate, praesentium? Quas dicta rem quidem culpa alias eius eveniet
        velit ea autem vero, optio non, fuga dolore ratione. Sit eum illo totam labore accusamus, saepe dolorem quasi
        est? Tempore deleniti quae illo culpa sit quod laborum labore earum, nisi ea molestias recusandae optio quas
        minima nesciunt perferendis dolor! Impedit culpa, harum fuga repudiandae totam dolorum mollitia voluptas sed sit
        consequuntur eveniet! Eos cumque repellat delectus est laborum cupiditate nemo consequuntur. Deserunt
        repellendus vitae ducimus consectetur quod.
    </p>
    <p class="my_text">
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Explicabo eius impedit minus quos repellat quidem
        fugit recusandae beatae. Assumenda quidem nostrum quasi tempore non, ipsam eveniet delectus magni placeat
        commodi dolor hic nesciunt possimus fugiat necessitatibus exercitationem soluta explicabo natus nihil
        accusantium ea, autem dolore consectetur! Voluptate, praesentium? Quas dicta rem quidem culpa alias eius eveniet
        velit ea autem vero, optio non, fuga dolore ratione. Sit eum illo totam labore accusamus, saepe dolorem quasi
        est? Tempore deleniti quae illo culpa sit quod laborum labore earum, nisi ea molestias recusandae optio quas
        minima nesciunt perferendis dolor! Impedit culpa, harum fuga repudiandae totam dolorum mollitia voluptas sed sit
        consequuntur eveniet! Eos cumque repellat delectus est laborum cupiditate nemo consequuntur. Deserunt
        repellendus vitae ducimus consectetur quod.
    </p>
    <div id="magnifier_icon">
        <span>&#128269;</span>
    </div>











</body>



<script type="text/javascript">
    window.onload = function () {

        var oP = document.getElementsByClassName('my_text');
        var oDiv = document.getElementById('magnifier_icon');
        var selectionText = null;

        for (let i = 0; i < oP.length; i++) {
            oP[i].onmouseup = function (ev) {//设定一个onmouseup事件
                var ev = ev || window.event;
                var left = ev.clientX;
                var top = ev.clientY;
                selectionText = document.getSelection().toString();
                if (selectionText.length > 1) {
                    setTimeout(function () {//设定一个定时器
                        oDiv.style.display = 'block';
                        oDiv.style.left = left + 'px';
                        oDiv.style.top = top + 'px';
                    }, 100);
                }
                else {
                    oDiv.style.display = 'none';
                }
            }
        }



        oP.onclick = function (ev) {
            var ev = ev || window.event;
            ev.cancelBubble = true;
        };
        document.onclick = function () {
            oDiv.style.display = 'none';
        };

        oDiv.onclick = function () {
            alert(selectionText)
            // window.location.href = 'http://service.weibo.com/share/share.php?url=' + selectText() + '&url=' + 'http://blog.sina.com.cn';
        };


        document.addEventListener('click', (e) => {
            console.log(e.clientX, e.clientY);
        })
    };
</script>


</html>